<template>
  <div class="search-box">
    <a-modal v-model:visible="open" width="500px" title="操作确认" :confirmLoading="loading" @cancel="hideModal" @ok="handleOk">
      <div>确定当前审核操作吗？</div>
      <div style="margin-top: 20px">
        <text style="padding-right: 20px">参与数量</text>
        <a-input-number id="inputNumber" v-model:value="numValue" :min="1" />
      </div>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
  import message from 'ant-design-vue/es/message'
  import { onMounted, reactive, ref } from 'vue'

  import { approveRequire } from '/@/api/exchange/requirement'

  const emit = defineEmits<(e: 'back') => void>()
  const props = defineProps({
    requireParticipateId: { type: String, default: '' },
  })
  const open = ref<boolean>(false)
  const numValue = ref<number>(null)
  const loading = ref<boolean>(false)

  // 打开弹窗
  const showModal = () => {
    open.value = true
  }

  // 关闭弹窗
  const hideModal = () => {
    open.value = false
    numValue.value = null
    loading.value = false
  }

  // 提交
  const handleOk = async () => {
    if (!numValue.value) {
      message.error('请输入参与数量')
      return
    }
    loading.value = true
    const params = {
      requireParticipateId: props.requireParticipateId,
      approveStatus: 2,
      participateAmount: numValue.value,
    }
    const { responseCode, responseMessage } = await approveRequire(params)
    if (responseCode === 100000000) {
      message.success('操作成功')
      hideModal()
      emit('back')
    } else {
      message.warning(responseMessage || '操作失败')
    }
    loading.value = false
  }

  defineExpose({
    showModal,
  })
</script>
<style lang="less" scoped></style>
